<template>
  <div class="container">
    <el-row
      :gutter="10"
      class="my-1 font-bold text-[18px]"
      style="font-family: 宋体; text-stroke: 0.5px #000"
    >
      <el-col :span="3">
        <div>
          <span
            style="font-family: 黑体; text-stroke: 0px #000"
            class="tracking-[10px]"
            >客</span
          >
          <span style="font-family: 黑体; text-stroke: 0px #000">户：</span>
          <span>{{ customer.name }}</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <span>电话：</span>
          <span>{{ customer.mobile }}</span>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="whitespace-nowrap">
          <span>订货日期：</span>
          <span class="mr-8">{{
            dayjs(timeStampFormatter(saleOrderInfo.TOrderPDate, true)).format(
              "YYYY年MM月DD日"
            )
          }}</span>
          <span>交货日期：</span>
          <span>{{
            dayjs(timeStampFormatter(saleOrderInfo.TOrderEDate, true)).format(
              "YYYY年MM月DD日"
            )
          }}</span>
        </div>
      </el-col>
      <el-col :span="4">
        <span>接单员：{{ saleOrderInfo.SalesmanName }}</span>
      </el-col>
    </el-row>
    <table
      cellPadding="0"
      cellSpacing="0"
      border="1"
      class="text-center w-full"
      style="font-family: 宋体"
    >
      <tr style="font-family: normal">
        <template v-for="(item, index) in tableHeaderConfig" :key="index">
          <th v-if="item.key == 'Count'" class="text-center" colspan="2">
            <div>数量</div>
            <div class="flex justify-between mx-2">
              <div class="mr-4">左</div>
              <div>右</div>
            </div>
          </th>
          <th v-else :style="{ width: item.width }" :colspan="item.colspan">
            {{ item.name }}
          </th>
        </template>
      </tr>
      <template v-for="(dataItem, index) in orderData" :key="index">
        <tr>
          <template v-for="header in tableHeaderConfig" :key="header.key">
            <template v-if="header.key == 'Count'">
              <td class="py-1">
                {{ dataItem.Count1 || "0" }}
              </td>
              <td class="py-1">
                {{ dataItem.Count2 || "0" }}
              </td>
            </template>
            <td v-else-if="header.key == 'specification'" class="py-1">
              {{ dataItem.Height_Total }}*{{ dataItem.Width_Total }}*{{
                dataItem.Tickness_Wall
              }}
            </td>
            <td v-else-if="header.key == 'Height_Left'" class="py-1">
              {{ dataItem.Height_Left }}
            </td>
            <td v-else-if="header.key == 'DoorHeaderPost'" class="py-1">
              {{ dataItem.DoorHeader }} {{ dataItem.DoorPost }}
            </td>
            <td v-else-if="header.key == 'serialNo'">{{ index + 1 }}</td>
            <td v-else class="py-1">
              {{ dataItem[header.key] }}
            </td>
          </template>
        </tr>
        <tr>
          <td colspan="100" class="text-left p-1">
            价格说明：{{ dataItem.Remark_Money }}
          </td>
        </tr>
        <tr>
          <td colspan="100" class="text-left p-1">
            备注：{{ dataItem.Remark }}
          </td>
        </tr>
      </template>
    </table>
  </div>
</template>
<script setup>  
import tableHeaderConfig from "../../print/tableConfig.json";
import dayjs from 'dayjs'
import { timeStampFormatter } from "@/utils";
const state = reactive({
  customer: {
    name: "李岱",
    mobile: "1928273632",
  },
  saleOrderInfo: {
    SalesmanName: "接单员",
    TOrderPDate: "2025年3月27日",
    TOrderEDate: "2025年3月27日",
  },
  orderData: [{
    Count1: "",
    Count2: "",
    Height_Total: "",
    Width_Total: "",
    Tickness_Wall: "",
    Height_Left: "",
    DoorHeader: "",
    DoorPost: "",
    Remark_Money: "",
    Remark: "",
  }],
});
const { customer, saleOrderInfo, orderData } = toRefs(state);
</script>
<style scoped>
.container {
  padding: 4px 10px;
}
</style>
